<template>
  <div class="flex d-table" id="d-table" style="position: relative">
    <pt-table-loading v-show="loading" />
    <div class="left">
      <el-card class="card" shadow="hover">
        <div class="card-title">基本信息</div>
        <div class="item">
          <em class="ti">订单号:</em>{{curOrderlist.ordercode}}
        </div>
        <div class="item">
          <em class="ti">支付方式:</em>{{curOrderlist.ispay == '1' ? paySatus(curOrderlist.paytype) : '未支付' }}
        </div>
        <div class="item">
          <em class="ti">所属区域:</em>{{curOrderlist.agentname}}
        </div>
        <div class="item">
          <em class="ti">订单备注:</em>{{curOrderlist.content}}
        </div>
      </el-card>
      <el-card class="card" shadow="hover">
        <div class="card-title">用户信息</div>
        <div v-if="curOrderlist.suportself">
          <div class="item" v-if="curOrderlist.suportself">>
            <em class="ti">自取电话:</em>{{curOrderlist.selfmobile}} 
          </div>
         <div class="item" v-if="curOrderlist.suportself">>
            <em class="ti">自取时间:</em>{{curOrderlist.selftime}}
          </div>
        </div>
        <div v-else>
          <div class="item">
            <em class="ti">收货人姓名:</em>{{curOrderlist.username}}
          </div>
          <div class="item">
            <em class="ti">收货人电话:</em>{{curOrderlist.userphone}}
          </div>
          <div class="item">
            <em class="ti">下单人电话:</em>{{curOrderlist.usermobile}}
          </div>
           <div class="item">
            <em class="ti">收货人地址:</em>{{curOrderlist.useraddress}}{{curOrderlist.address}}
          </div>
        </div>
      </el-card>
      <el-card class="card" shadow="hover">
        <div class="card-title">餐厅信息</div>
        <div class="item"><em class="ti">餐厅名称:</em>{{curOrderlist.businessname}}</div>
        <div class="item"><em class="ti">餐厅电话:</em>{{curOrderlist.businessmobile}}</div>
        <div class="item"><em class="ti">配送方式:</em>{{curOrderlist.isdeliver=='0'?'平台专送':'商家自配送'}}</div>
        <div class="item"><em class="ti">商家服务费率:</em>{{curOrderlist.coefficient}}%</div>
      </el-card>
      <el-card shadow="hover">
        <div class="card-title">商品信息</div>
        <div class="item flex-row between" v-for="item in curOrderlist.goodsSellRecordChildren" :key="item.id"
          :class="{'del-price': item.isRefund}">
          <span class="name flex-row"><em class="t-name text-over">{{item.goodssellname|capitalize(item.standaroptionname)}}</em>x{{item.num}}</span>
          <span class="price">{{item.totalprice}}</span>
        </div>
        <div class="item flex-row between">
          <span class="name">餐盒费</span>
          <span class="price">{{curOrderlist.packing || 0}}</span>
        </div>
        <div class="item flex-row between">
          <span class="name">配送费</span>
          <span class="price">{{curOrderlist.deliveryfee || 0}}</span>
        </div>
        <div class="item flex-row between">
          <span class="name">区域承担的费用</span>
          <span class="price">-{{curOrderlist.subsidy }}</span>
        </div>
          <div class="item flex-row between">
          <span class="name">商家承担的费用</span>
          <span class="price">-{{curOrderlist.activityprice|subMoney(curOrderlist.subsidy)}}</span>
        </div>
        <div class="item flex-row between line">
          <span class="name">实付</span>
          <span class="price blod">{{curOrderlist.totalpay}}</span>
        </div>
        <div class="item flex-row between"
          v-if="curOrderlist.isrefund === 2 || curOrderlist.isrefund === 4">
          <span class="name">退款金额</span>
          <span class="price">{{curOrderlist.refund}}</span>
        </div>
      </el-card>
    </div>
    <div class="right">
      <el-card class="card" shadow="hover">
        <div class="card-title">订单进度</div>
        <el-timeline :reverse="true">
          <el-timeline-item 
            v-for="(item,index) in curOrderlist.goodsSellOutStatus"
            :key="index"
            :color="index === (curOrderlist.goodsSellOutStatus.length - 1) ? '#0bbd87' : ''"
            :timestamp="`系统：${item.createtime}`">
           【{{item.operationname}}】{{item.statstr}}
          </el-timeline-item>
        </el-timeline>
      </el-card>
      <el-card shadow="hover">
        <div class="card-title">配送信息</div>
        <div class="item">
          <em class="ti">是否自取：</em>{{curOrderlist.suportself?'是':'否'}}
        </div>
        <div class="item">
          <span class="ti">是否预订单：</span>{{curOrderlist.booked?'是':'否'}}
        </div>
        <div class="item" v-if='curOrderlist.booked'>
          <em class="ti">预订时间：</em>{{curOrderlist.booktime}}
        </div>
        <div class="item" v-if="!curOrderlist.suportself">
          <em class="ti">预计送达时间：</em>{{curOrderlist.distime}}
        </div>
        <div class="item" v-if="!curOrderlist.suportself">
          <em class="ti">骑手姓名：</em>{{curOrderlist.shopper}}
        </div>
        <div class="item" v-if="!curOrderlist.suportself">
          <em class="ti">骑手电话：</em>{{curOrderlist.shoppermobile}}
        </div>
        <div class="item" v-if="!curOrderlist.suportself">
          <em class="ti">配送距离：</em>{{curOrderlist.distance||0}}{{comConfig.mLength}}
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import acction from '@/utils/acction.js'
  import { paySatus } from '@/utils/ptkc'
  export default {
    props: {
      curOrderlist: Object,
      loading: true
    },
    filters: {  //商品名称
      capitalize(t1, t2) {
        let str = t1;
        if (t2) str += `(${t2})`
        return str
      },
      subMoney(m1,m2) {
        if (m1 >= '0' && m2 >= '0') {
          return  new acction(m1, m2).accSub()
        } else {
          return '0'
        }
      }
    },
    data() {
      return {
        paySatus: paySatus
      }
    }
  }
</script>

<style lang="scss" scoped>
  .d-table{
    .card{
      margin-bottom: 10px;
    }
    .card-title{
      margin-bottom:15px;
      font-weight: 600;
    }
    .left{
      flex: 1;
      max-width: 600px;
      margin-right: 10px;
    }
    .right{
      width:400px;
    }
    .item{
      margin-bottom: 10px;
      &.between{
        justify-content: space-between;
      }
      &.line{
        padding-top: 10px;
        border-top: 1px solid #ccc;
      }
      &.del-price{
        text-decoration: line-through;
        color:red;
      }
      .ti{
        margin-right: 5px;
        color: #999;
      }
      .name{
        color: #999;
        .t-name{
          display: inline-block;
          max-width: 400px;
          margin-right: 10px;
          color: #303133;
        }
      }
      .price{
        color: #303133;
        &.blod{
          font-weight: bold;
          font-size: 16px;
          color: red;
        }
      }
    }
  }
</style>
